<style>
    * {
        box-sizing: border-box;
    }

    .config-form-container {
        padding: 20px;
        max-width: 100%;
        margin: 0 auto;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    /* 警告提示框 */
    .alert-info {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        padding: 15px 20px;
        border-radius: 8px;
        margin-bottom: 25px;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .alert-info::before {
        content: "ℹ️";
        font-size: 24px;
    }

    .alert-info .server-ip {
        font-weight: 700;
        font-size: 18px;
        padding: 2px 8px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        margin: 0 4px;
    }

    /* 表单组 */
    .form-group {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .form-label {
        min-width: 100px;
        font-weight: 600;
        color: #333;
        font-size: 14px;
        text-align: right;
    }

    .form-label.required::after {
        content: "*";
        color: #ff4d4f;
        margin-left: 4px;
    }

    .form-input {
        flex: 1;
        padding: 10px 15px;
        border: 1.5px solid #e0e0e0;
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.3s ease;
        background: #fff;
    }

    .form-input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-input:hover {
        border-color: #b8b8b8;
    }

    /* 时间设置 */
    .time-setting-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
    }

    .time-select {
        min-width: 140px;
        padding: 10px 15px;
        border: 1.5px solid #e0e0e0;
        border-radius: 6px;
        font-size: 14px;
        background: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 35px;
    }

    .time-select:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .time-input {
        width: 100px;
        padding: 10px 15px;
        border: 1.5px solid #e0e0e0;
        border-radius: 6px;
        font-size: 14px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .time-input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .time-unit {
        font-size: 14px;
        color: #666;
        font-weight: 500;
    }

    /* 同步数据区域 */
    .sync-data-section {
        margin-top: 30px;
    }

    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #667eea;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .section-title::before {
        content: "📦";
        font-size: 20px;
    }

    .checkbox-container {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 12px;
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }

    .checkbox-group {
        background: #fff;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

    .checkbox-group:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .checkbox-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
        cursor: pointer;
        user-select: none;
    }

    .checkbox-header:hover {
        color: #667eea;
    }

    .checkbox-header input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #667eea;
    }

    .checkbox-header-text {
        font-weight: 600;
        font-size: 15px;
        color: #333;
    }

    .checkbox-list {
        max-height: 180px;
        overflow-y: auto;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .checkbox-list::-webkit-scrollbar {
        width: 6px;
    }

    .checkbox-list::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .checkbox-list::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    .checkbox-list::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .checkbox-item {
        padding: 8px 5px;
        transition: background 0.2s ease;
        border-radius: 4px;
    }

    .checkbox-item:hover {
        background: #f5f5f5;
    }

    .checkbox-item label {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        margin: 0;
        font-weight: normal;
    }

    .checkbox-item input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #667eea;
    }

    .checkbox-item-text {
        font-size: 13px;
        color: #555;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
    }

    .checkbox-item:hover .checkbox-item-text {
        color: #333;
    }

    /* 空状态 */
    .empty-state {
        text-align: center;
        padding: 20px;
        color: #999;
        font-size: 13px;
    }

    /* 响应式 */
    @media (max-width: 768px) {
        .form-group {
            flex-direction: column;
            align-items: stretch;
        }

        .form-label {
            text-align: left;
            min-width: auto;
        }

        .checkbox-container {
            grid-template-columns: 1fr;
        }

        .time-setting-row {
            flex-wrap: wrap;
        }
    }
</style>
<div class="config-form-container">
    <!-- 提示信息 -->
    <div class="alert-info">
        <div>
            请先开启目标服务器宝塔面板的API接口，并将该IP <span class="server-ip">{{ data.server_ip }}</span> 加入白名单
        </div>
    </div>

    <!-- 基本信息表单 -->
    <div class="form-group">
        <label class="form-label required">面板名称</label>
        <input type="text" class="form-input" name="title" value="" placeholder="例如：生产服务器" />
    </div>

    <div class="form-group">
        <label class="form-label required">面板地址</label>
        <input type="text" class="form-input" name="panel" value="" placeholder="例如：http://192.168.0.1:8888" />
    </div>

    <div class="form-group">
        <label class="form-label required">面板密钥</label>
        <input type="text" class="form-input" name="token" value="" placeholder="请输入目标面板的API密钥" />
    </div>

    <div class="form-group">
        <label class="form-label required">同步周期</label>
        <div class="time-setting-row">
            <select class="time-select" id="time-type" name="time_type">
                <option value="">请选择周期类型</option>
                <option value="minute">按分钟</option>
                <option value="hour">按小时</option>
            </select>
            <input type="number" class="time-input" name="hour" value="" placeholder="数值" min="1" />
            <span class="time-unit" id="time-type-text">-</span>
        </div>
    </div>

    <!-- 同步数据选择 -->
    <div class="sync-data-section">
        <div class="section-title">选择要同步的数据</div>
        <div class="checkbox-container">
            <!-- 网站 -->
            <div class="checkbox-group">
                <div class="checkbox-header" onclick="toggleAllCheckbox('sites')">
                    <input type="checkbox" id="sites_All" checked />
                    <span class="checkbox-header-text">🌐 网站</span>
                </div>
                <ul class="checkbox-list">
                    {% if data.sites %}
                        {% for site in data.sites %}
                        <li class="checkbox-item">
                            <label>
                                <input type="checkbox" data-id="{{ site.id }}" value="{{ site.name }}" name="sites" checked />
                                <span class="checkbox-item-text" title="{{ site.name }}">{{ site.name }}</span>
                            </label>
                        </li>
                        {% endfor %}
                    {% else %}
                        <li class="empty-state">暂无网站</li>
                    {% endif %}
                </ul>
            </div>

            <!-- FTP -->
            <div class="checkbox-group">
                <div class="checkbox-header" onclick="toggleAllCheckbox('ftps')">
                    <input type="checkbox" id="ftps_All" checked />
                    <span class="checkbox-header-text">📁 FTP</span>
                </div>
                <ul class="checkbox-list">
                    {% if data.ftps %}
                        {% for ftp in data.ftps %}
                        <li class="checkbox-item">
                            <label>
                                <input type="checkbox" data-id="{{ ftp.id }}" value="{{ ftp.name }}" name="ftps" checked />
                                <span class="checkbox-item-text" title="{{ ftp.name }}">{{ ftp.name }}</span>
                            </label>
                        </li>
                        {% endfor %}
                    {% else %}
                        <li class="empty-state">暂无FTP</li>
                    {% endif %}
                </ul>
            </div>

            <!-- 数据库 -->
            <div class="checkbox-group">
                <div class="checkbox-header" onclick="toggleAllCheckbox('db')">
                    <input type="checkbox" id="db_All" checked />
                    <span class="checkbox-header-text">💾 数据库</span>
                </div>
                <ul class="checkbox-list">
                    {% if data.databases %}
                        {% for db in data.databases %}
                        <li class="checkbox-item">
                            <label>
                                <input type="checkbox" data-id="{{ db.id }}" value="{{ db.name }}" name="db" checked />
                                <span class="checkbox-item-text" title="{{ db.name }}">{{ db.name }}</span>
                            </label>
                        </li>
                        {% endfor %}
                    {% else %}
                        <li class="empty-state">暂无数据库</li>
                    {% endif %}
                </ul>
            </div>

            <!-- 计划任务 -->
            <div class="checkbox-group">
                <div class="checkbox-header" onclick="toggleAllCheckbox('cron')">
                    <input type="checkbox" id="cron_All" checked />
                    <span class="checkbox-header-text">⏰ 计划任务</span>
                </div>
                <ul class="checkbox-list">
                    {% if data.crontab %}
                        {% for cron in data.crontab %}
                        <li class="checkbox-item">
                            <label>
                                <input type="checkbox" data-id="{{ cron.id }}" value="{{ cron.name }}" name="cron" checked />
                                <span class="checkbox-item-text" title="{{ cron.name }}">{{ cron.name }}</span>
                            </label>
                        </li>
                        {% endfor %}
                    {% else %}
                        <li class="empty-state">暂无计划任务</li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript">
    // 全局函数：切换分组全选
    function toggleAllCheckbox(groupName) {
        event.stopPropagation();
        const allCheckbox = $(`#${groupName}_All`);
        const isChecked = allCheckbox.is(':checked');
        $(`input[name="${groupName}"]`).prop('checked', isChecked);
    }

    $(function () {
        // 统一的全选复选框处理
        const checkboxGroups = {
            'sites': $('#sites_All'),
            'ftps': $('#ftps_All'),
            'db': $('#db_All'),
            'cron': $('#cron_All')
        };

        // 为每个组绑定全选事件
        Object.keys(checkboxGroups).forEach(function(groupName) {
            const allCheckbox = checkboxGroups[groupName];
            
            // 全选复选框点击事件
            allCheckbox.on('click', function(e) {
                e.stopPropagation();
                const isChecked = $(this).is(':checked');
                $(`input[name="${groupName}"]`).prop('checked', isChecked);
            });

            // 单个复选框点击事件 - 联动更新全选状态
            $(document).on('click', `input[name="${groupName}"]`, function() {
                updateAllCheckbox(groupName);
            });
        });

        // 更新全选复选框状态
        function updateAllCheckbox(groupName) {
            const allCheckbox = checkboxGroups[groupName];
            const items = $(`input[name="${groupName}"]`);
            const checkedItems = $(`input[name="${groupName}"]:checked`);
            
            if (items.length === 0) return;
            
            allCheckbox.prop('checked', checkedItems.length === items.length);
            allCheckbox.prop('indeterminate', checkedItems.length > 0 && checkedItems.length < items.length);
        }

        // 初始化全选状态
        Object.keys(checkboxGroups).forEach(function(groupName) {
            updateAllCheckbox(groupName);
        });

        // 监听时间类型选择
        $('#time-type').on('change', function () {
            const value = $(this).val();
            const textMap = {
                'minute': '分钟/同步一次',
                'hour': '小时/同步一次'
            };
            $('#time-type-text').text(textMap[value] || '-');
        });

        // 输入框焦点动画
        $('.form-input, .time-input, .time-select').on('focus', function() {
            $(this).parent().addClass('focused');
        }).on('blur', function() {
            $(this).parent().removeClass('focused');
        });

        // 表单验证提示
        $('input[required], select[required]').on('blur', function() {
            if (!$(this).val()) {
                $(this).addClass('error');
            } else {
                $(this).removeClass('error');
            }
        });
    });
</script>